<template>
  <div>
    <!-- 确保ID与你的图表对应 -->
    <div id="home2zuo2" class="charts"></div>
  </div>
</template>

<script>
import * as echarts from "echarts"; // 确保已经安装了echarts并正确导入

export default {
  mounted() {
    this.initEcharts();
    window.addEventListener("resize", this.handleWindowResize);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.handleWindowResize);
  },
  methods: {
    initEcharts() {
      const myChart = echarts.init(document.getElementById("home2zuo2"));

      var XIdx = [];
      var data = [
        54, 86, 46, 45, 77, 96, 89, 88, 23, 38, 3, 66, 98, 43, 73, 76, 44, 16,
        21, 14, 71, 8, 61, 65, 1, 68, 33, 69, 49, 24,
      ];
      for (var i = 1; i <= data.length; i++) {
        XIdx.push(i);
      }

      // 基于准备好的dom，初始化echarts实例

      const option = {
        //鼠标提示工具
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          // 类目类型
          type: "category",
          // x轴刻度文字
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月",
          ],
          axisTick: {
            show: false, //去除刻度线
          },
          axisLabel: {
            color: "#4c9bfd", //文本颜色
          },
          axisLine: {
            show: false, //去除轴线
          },
          boundaryGap: false, //去除轴内间距
        },
        yAxis: {
          // 数据作为刻度文字
          type: "value",
          axisTick: {
            show: false, //去除刻度线
          },
          axisLabel: {
            color: "#4c9bfd", //文本颜色
          },
          axisLine: {
            show: false, //去除轴线
          },
          boundaryGap: false, //去除轴内间距
        },
        //图例组件
        legend: {
          textStyle: {
            color: "#4c9bfd", // 图例文字颜色
          },
          right: "10%", //距离右边10%
        },
        // 设置网格样式
        grid: {
          show: true, // 显示边框
          top: "20%",
          left: "3%",
          right: "4%",
          bottom: "3%",
          borderColor: "#012f4a", // 边框颜色
          containLabel: true, // 包含刻度文字在内
        },
        series: [
          {
            name: "预期销售额",
            // 数据
            data: [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
            // 图表类型
            type: "line",
            // 圆滑连接
            smooth: true,
            itemStyle: {
              color: "#00f2f1", // 线颜色
            },
          },
          {
            name: "实际销售额",
            // 数据
            data: [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79],
            // 图表类型
            type: "line",
            // 圆滑连接
            smooth: true,
            itemStyle: {
              color: "#ed3f35", // 线颜色
            },
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },

    handleWindowResize() {
      this.$nextTick(() => {
        this.myCharts.forEach((chart) => chart.resize());
      });
    },
  },
  data() {
    return {
      myCharts: [], // 用于存储所有echarts实例，以便在窗口调整大小时重新调整图表
    };
  },
};
</script>
